<template>
  <div class="tabbar-container">
   
    <van-tabbar 
      v-model="active" 
      active-color="#333333" 
      inactive-color="#999"
      fixed
    >
      <van-tabbar-item icon="wap-home" @click="toindex">首页</van-tabbar-item>
      <van-tabbar-item icon="shop" @click="toShop">商城</van-tabbar-item>
     
      <van-tabbar-item class="center-tab" @click="toCenter">
        <template #icon>
          <div class="center-icon">
            <van-icon name="location" color="#333" />
          </div>
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="chat" @click="toMessage">消息</van-tabbar-item>
      <van-tabbar-item icon="contact" @click="toLogin">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script setup name="PetsTabbar">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const active = ref(0)

// 路由与tabbar索引的映射关系
const routeIndexMap = {
  lineTogic: 0,  // 首页
  petShop: 1,    // 商城
  center: 2,     // 中间按钮对应页面
  message: 3,    // 消息页面
  login: 4       // 我的页面
}

// 监听路由变化，同步active状态
watch(
  () => route.name,
  (newName) => {
    // 根据当前路由名称设置对应的active值
    active.value = routeIndexMap[newName] ?? 0
  },
  { immediate: true } // 初始化时立即执行一次
)

// 路由跳转方法
const toShop = () => {
  active.value = 1
  router.push({ name: 'petShop' })
}

const toindex = () => {
  active.value = 0
  router.push({ name: 'lineTogic' })
}

const toLogin = () => {
  active.value = 4
  router.push({ name: 'login' })
}

// 中间按钮跳转（根据实际需求修改路由名称）
const toCenter = () => {
  active.value = 2
  // 这里替换为实际的中间按钮对应路由
  // router.push({ name: 'center' })
}

// 消息页面跳转（根据实际需求修改路由名称）
const toMessage = () => {
  active.value = 3
  // 这里替换为实际的消息页面路由
  // router.push({ name: 'message' })
}
</script>

<style lang='less' scoped>
.tabbar-container{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999; /* 设置较高层级，确保不被其他元素遮挡 */

  /* 中间特殊按钮样式 */
.center-tab {
  position: absolute;
  z-index: 1;
  margin-bottom: 0px;
}

.center-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #FFD700; /* 黄色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px; /* 向上凸出 */
  left: 50%;
  transform: translateX(-50%);
}

/* 调整其他tabbar-item的间距 */
:deep(.van-tabbar-item) {
  position: relative;
  z-index: 0;
}

/* 确保中间按钮文字可见 */
:deep(.center-tab .van-tabbar-item__text) {
  margin-top: 20px;
}

body {
  padding-bottom: 56px; /* 根据底部导航栏高度设置，避免内容被遮挡 */
}

}
</style>
